import { Table, Pagination } from 'antd';
import React, { useState, useEffect } from 'react';
import { getCompensationCount, getApplyRecordInfo } from '../service';
import { useRequest } from '@umijs/hooks';
import IndemnityCountTable from '../components/IndemnityCountTable';
import style from './TableForm.less';

// 过滤证件类型
const flilterIDtype = v => {
  if (v === 'NI') {
    return <span>身份证</span>;
  } else if (v === 'PP' || v === 'PSPT') {
    return <span>护照</span>;
  } else {
    return <span>其他</span>;
  }
};
const TableForm = props => {
  const {
    data,
    editInfo,
    type,
    total,
    pageSize,
    current,
    handleCurrent,
    setTableLoading,
    tableLoading,
    handlePageSize,
    orderId,
  } = props;
  // 获取申领记录弹框数据
  const { data: claimsData, run: claimsFun } = useRequest(params => getApplyRecordInfo(params),{manual:true});
  // 申领记录显示
  const [claimsVisible, setClaimsVisible] = useState(false);
  // 点击的旅客信息储存
  const [passengerTitle, setPassengerTitle] = useState('');

  // 获取补偿次数表格数据
  const { data: countData, run } = useRequest(params => getCompensationCount(params),{manual:true});
  // 补偿次数表格显示
  const [createModalVisible, handleModalCount] = useState(false);
  // 点击的旅客姓名储存
  const [passengerName, handlePassengerName] = useState('');
  // 请求数据的loading
  const [loading, setLoading] = useState(tableLoading);

  useEffect(() => {
    setLoading(tableLoading);
  }, [tableLoading])

  // 打开总补偿次数
  const openCountModal = (payCount, record) => {
    if (payCount === '0') {
      return false;
    }
    handleModalCount(true);
    handlePassengerName(record.psgName);
    run({
      flightNo: record.flightNo || record.flightNum,
      flightDate: record.flightDate,
      paxId: record.idx,
    });
  };

  let columns = [
    {
      title: '姓名',
      dataIndex: 'psgName',
      align: 'center',
      width: 120,
      // render: (text, record) => {
      //   return (
      //     <div>
      //       <span style={{ verticalAlign: 'middle' }}>{text}</span>
      //       {record.withBaby === 'Y' ? (
      //         <img
      //           alt=""
      //           style={{ verticalAlign: 'middle' }}
      //           src={require('./images/icon-test.svg')}
      //         />
      //       ) : null}
      //       {record.isChild === 'Y' ? (
      //         <img
      //           alt=""
      //           style={{ verticalAlign: 'middle' }}
      //           src={require('./images/ertong.svg')}
      //         />
      //       ) : null}
      //     </div>
      //   );
      // },
    },
    {
      title: '证件类型',
      dataIndex: 'idType',
      align: 'center',
      width: 100,
      render: text => {
        return flilterIDtype(text);
      },
    },
    {
      title: '证件号',
      dataIndex: 'idNum',
      align: 'center',
      width: 180,
    },
    {
      title: '票号',
      dataIndex: 'etNum',
      align: 'center',
      width: 150,
    },
    {
      title: '补偿单状态',
      dataIndex: 'orderStatus',
      align: 'center',
      width: 100,
      render: v => (
        <>
          <span style={{ display: v === '0' ? 'block' : 'none' }}>草稿</span>
          <span style={{ display: v === '1' ? 'block' : 'none' }}>审核中</span>
          <span style={{ display: v === '2' ? 'block' : 'none' }}>通过</span>
          <span style={{ display: v === '3' ? 'block' : 'none' }}>生效</span>
          <span style={{ display: v === '4' ? 'block' : 'none' }}>已关闭</span>
          <span style={{ display: v === '5' ? 'block' : 'none' }}>未通过</span>
          <span style={{ display: v === '6' ? 'block' : 'none' }}>驳回</span>
          <span style={{ display: v === '7' ? 'block' : 'none' }}>待审核</span>
          <span style={{ display: v === '8' ? 'block' : 'none' }}>已逾期</span>
          <span style={{ display: v === '9' ? 'block' : 'none' }}>注销</span>
          <span style={{ display: v === '10' ? 'block' : 'none' }}>已发放</span>
        </>
      )
    },
    {
      title: '手机号',
      ellipsis: true,
      dataIndex: 'phone',
      align: 'center',
      width: 120,
    },
    {
      title: '值机状态',
      dataIndex: 'status',
      align: 'center',
      width: 130,
      render: (status) => (
        <>
          <span style={{ display: status === 'PT' ? 'block' : 'none' }}>PT（出票）</span>
          <span style={{ display: status === 'NA' ? 'block' : 'none' }}>NA（未值机）</span>
          <span style={{ display: status === 'AC' ? 'block' : 'none' }}>AC（值机）</span>
          <span style={{ display: status === 'XR' ? 'block' : 'none' }}>XR（值机取消）</span>
          <span style={{ display: status === 'CL' ? 'block' : 'none' }}>CL（订座取消）</span>
          <span style={{ display: status === 'SB' ? 'block' : 'none' }}>SB（候补）</span>
          <span style={{ display: status === 'DL' ? 'block' : 'none' }}>DL（拉下）</span>
        </>
      )
    },
    {
      title: '是否取消',
      dataIndex: 'isCancel',
      align: 'center',
      width: 100,
      render: text => {
        if (text === 'Y') {
          return <span>是</span>;
        } else {
          return <span>否</span>;
        }
      },
    },
    {
      title: '主舱位',
      dataIndex: 'mainClass',
      align: 'center',
      width: 100,
    },
    {
      title: '子舱位',
      dataIndex: 'subClass',
      align: 'center',
      width: 100,
    },
    {
      title: '购票时间',
      dataIndex: 'printTicketTime',
      align: 'center',
      width: 160,
    },
  ];


  return (
    <>
      {/* 补偿单管理 */}
      <IndemnityCountTable
        {...{ countData, handleModalCount, createModalVisible, passengerName }}
      />

      <Table
        columns={columns}
        dataSource={data}
        loading={loading}
        scroll={{ y: 400, x: 900 }}
        rowKey="idx"
        // pagination={false}
        pagination={{
          showSizeChanger: true,
          showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 项`,
          total:total,
          current,
          onChange: (page) =>{
            handleCurrent(page)
          },
          onShowSizeChange: (current, size) =>{
            handleCurrent(1);
          }
        }}
        size="small"
      />
      {/* {type === 'examine' || editInfo? <Pagination total={total}
      showTotal={(total, range) => `${range[0]}-${range[1]} 共 ${total} 项`} pageSize={pageSize} current={current} 
      onChange={page => {
        console.log('page :>> ', page);
        setTableLoading(true)
        handleCurrent(page)
      }} 
      size="small"
      showSizeChanger 
      onShowSizeChange={(current, size) => {
        handleCurrent(1);
        setTableLoading(true)
        handlePageSize(size)
      }} />:null} */}
    </>
  );
};

export default TableForm;
